<template>
  <el-dialog title="播放" width="600px" v-model="dialogFormVisible">
    <div class="play-container">
      <video _ngcontent-iqc-c349="" id="monitorVideo" autoplay="autoplay">
        <source
          _ngcontent-iqc-c349=""
          src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"
          type="video/mp4"
        />
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      //是否显示
      dialogFormVisible: false,
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {
    //监听是否显示
    visible(newVal, oldVal) {
      if (newVal != oldVal) {
        this.dialogFormVisible = newVal;
      }
    },
  },
  created() {},
  methods: {
    /**
     * 确认
     */
    confirmFunc() {
      this.$message({
        type: "success",
        message: "操作成功!",
      });
      this.cancelFunc();
    },

    /**
     * 取消
     */
    cancelFunc() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="scss">
.play-container{
  video{
    width: 100%;
  }
}
</style>